<template>
	<view class="nav">
		<view class="green_button" v-for="n,key in navList" :key="n.name"
			:class="{'un_active' : n.unActive,'four': navList.length ==4 ,'three':navList.length ==3}"
			@click="checkNav(n,key)">
			{{n.name}}
		</view>
	</view>
</template>

<script>
	export default {
		props: ['navData'],
		data() {
			return {
				indexKey: null, //点击的上次下标
				navList: [{
						name: '全部患者',
						unActive: true
					},
					{
						name: '新增患者',
						unActive: true
					},
					{
						name: '流失患者',
						unActive: true
					},
					{
						name: '我的患者',
						unActive: true
					},
				],
			}
		},
		mounted() {
			if (this.navData) {
				this.navList = this.navData
			}
			//console.log(this.navData);
		},
		methods: {
			checkNav(obj, key) {
				this.navList.forEach(v => v.unActive = true)
				this.navList[key].unActive = false //选中目标绿色
				if (this.indexKey !== key) { //每次点击，激活的就不会被再次请求
					this.indexKey = key
					this.$emit('navSel', obj)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.nav {
		font-family: PingFang SC, PingFang SC;
		font-size: 30rpx;
		padding-bottom: 22rpx;
		//position: fixed;
		width: 100%;
		display: flex;
		background-color: #FFFFFF;
		justify-content: space-around;
		padding: 0 14rpx 22rpx 14rpx;
		.green_button {
			border-radius: 20rpx;
			//padding: 16rpx 20rpx;
			background: #4DC0D9;
			color: #FFFFFF;
		}

		.three {
			padding: 16rpx 50rpx;
		}

		.four {
			padding: 16rpx 20rpx;
		}

		.un_active {
			border-radius: 20rpx;
			font-weight: 500;
			//padding: 16rpx 20rpx;
			background: #F2F2F2;
			color: #333333;
		}
	}
</style>